在完成登入功能之前，我想要先介紹一下Angular的路由系統

Angular Routing:

In a single-page app, you change what the user sees by showing or hiding portions of the >display that correspond to particular components, rather than going out to the server to get a >new page. As users perform application tasks, they need to move between the different views that you have defined.

在SPA的架構下我們有別於以往向server請求並轉導至下一個頁面的方式，更傾向於將各部分的componens隱藏或顯示，因此Angular router可以協助我們處理要如何把視頁進行轉換的工作。

接著就讓我們來實際操作一遍吧~!

首先建立component

ng generate component index  #建立首頁component
ng generate component error  #建立一個錯誤component

將 error component 內的error.html改成404 not found

<p>404 NOT FOUND</p>

再來我們要去設定一下AppModule

import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule,  Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';

// 路徑設定
const routes: Routes  = [
  {path: 'login', component: LoginComponent},
  {path: 'index', component: IndexComponent},
  {path: '**', component: ErrorComponent}  // 萬用路由，不可設在前面
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
		// 導入設定
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

接著我們引入RouterModule &Routes 來進行路由設定
在Routes 內有以下的設定可以使用

interface Route {
  path?: string // 路徑
  pathMatch?: string // 路徑匹配的策略 設定為'full'表示須完全符合path才可以請求
  matcher?: UrlMatcher // 自訂的匹配規則
  component?: Type<any> //路徑匹配到時會實體化的元件
  redirectTo?: string // 路徑匹配時重新導向到的 URL
  canActivate?: any[] //權限設定
  canActivateChild?: any[] //對子路徑的權限設定
  canDeactivate?: any[] //DI 令牌陣列，以確定是否允許當前使用者停用該元件。
  canLoad?: any[] //是否允許載入元件
  data?: Data //ActivatedRoute 提供給元件的由開發人員定義的額外資料。預設情況下，不傳遞任何額外資料。
  resolve?: ResolveData //DI 令牌的對映，用於查詢資料解析器。請參閱 Resolve 。
  children?: Routes //一個子 Route 物件陣列，用於指定巢狀路由配置。
  loadChildren?: LoadChildren //一個物件，指定要延遲載入的子路由。
  runGuardsAndResolvers?: RunGuardsAndResolvers //定義何時執行守衛（guard）和解析器（resolver）。
}

有很多功能設定眼花撩亂，但等需要用到功能再去查閱就好，
我們此次先使用path? & component?這兩個參數設定就好

import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule,  Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'index', component: IndexComponent},
  {path: '**', component: ErrorComponent}  // 萬用路由，不可設在前面
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ErrorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

將路徑和元件進行綁定後，我們再前往app.component.html

<router-outlet></router-outlet>  #把其他selector模板換掉，改成這個

RouterOutlet:

Acts as a placeholder that Angular dynamically fills based on the current router state.
會負責將routes的路由設定實現

接著就可以看到當我們什麼路徑都沒打 http://localhost:4200
就會看到

http://localhost:4200/login

http://localhost:4200/index

參考資料

Angular中文文件-Route